<template>
  <div class="company-user-list" v-show="isShow">
    <ul class="global-operation-list">
      <li class="global-operation-left">
        <ul class="global-filter-list">
          <li class="global-filter-item">
            <h2 class="global-filter-item-title">关键字：</h2>
            <el-input placeholder="请输入品牌或公司名称" v-model="searchForm.keyword" style="width: 250px" clearable></el-input>
          </li>
          <li class="global-filter-item">
            <h2 class="global-filter-item-title">精准搜索：</h2>
            <el-input placeholder="请输入品牌" v-model="searchForm.accurateSearchKeyword" style="width: 250px"
              clearable></el-input>
          </li>
          <li class="global-filter-item">
            <h2 class="global-filter-item-title">受保类型：</h2>
            <el-select v-model="searchForm.protectTypes" multiple clearable>
              <el-option v-for="(item,index) in protectTypeList" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </li>
          <li class="global-filter-item"
            v-if="userInfo.role && (userInfo.role.includes(40) || userInfo.role.includes(55))">
            <h2 class="global-filter-item-title">只查看自己的：</h2>
            <el-checkbox v-model="searchForm.hasOnlyBusiness"></el-checkbox>
          </li>
          <li class="global-filter-item"
            v-if="userInfo.role && !userInfo.role.includes(40) && !userInfo.role.includes(55)">
            <el-popover placement="right-end" width="1000" trigger="click">
              <ul class="global-operation-list">
                <li class="global-operation-left">
                  <ul class="global-filter-list">
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">地区：</h2>
                      <el-select v-model="searchForm.areaId" clearable @change="changeArea" filterable>
                        <el-option v-for="(item,index) in areaList" :key="index" :label="item.sysValueName"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">商务：</h2>
                      <el-select v-model="searchForm.businessId" clearable filterable>
                        <el-option v-for="(item,index) in businessList" :key="index" :label="item.username"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">部门：</h2>
                      <el-select v-model="searchForm.departId" clearable filterable>
                        <el-option v-for="(item,index) in departList" :key="index" :label="item.sysValueName"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">客户状态：</h2>
                      <el-select v-model="searchForm.customerStatus" clearable filterable>
                        <el-option v-for="(item,index) in customerStatusList" :key="index" :label="item.sysValueName"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">客户阶段：</h2>
                      <el-select v-model="searchForm.customerStage" clearable filterable>
                        <el-option v-for="(item,index) in customerStageList" :key="index" :label="item.sysValueName"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">客户类型：</h2>
                      <el-select v-model="searchForm.customerType" clearable filterable>
                        <el-option v-for="(item,index) in customerTypeList" :key="index" :label="item.sysValueName"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">客户产品类型：</h2>
                      <el-select v-model="searchForm.customerProductType" clearable filterable>
                        <el-option v-for="(item,index) in customerProductTypeList" :key="index"
                          :label="item.sysValueName" :value="item.id">
                        </el-option>
                      </el-select>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">客户级别：</h2>
                      <el-select v-model="searchForm.customerLevel" clearable filterable>
                        <el-option v-for="(item,index) in customerLevelList" :key="index" :label="item.sysValueName"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">客户来源：</h2>
                      <el-select v-model="searchForm.customerSource" clearable filterable>
                        <el-option v-for="(item,index) in customerSourceList" :key="index" :label="item.sysValueName"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">商务类型：</h2>
                      <el-select v-model="searchForm.businessType" clearable filterable>
                        <el-option v-for="(item,index) in businessTypeList" :key="index" :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">日期：</h2>
                      <el-date-picker v-model="searchForm.date" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                      </el-date-picker>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">最后跟进日期：</h2>
                      <el-date-picker v-model="searchForm.lastFollowDate" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                      </el-date-picker>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">跟进日期：</h2>
                      <el-date-picker v-model="searchForm.followDate" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                      </el-date-picker>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">成交日期：</h2>
                      <el-date-picker v-model="searchForm.checkDate" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                      </el-date-picker>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">是否已成交：</h2>
                      <el-checkbox v-model="searchForm.hasCooperate"></el-checkbox>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">是否在沟通中：</h2>
                      <el-checkbox v-model="searchForm.hasConnect"></el-checkbox>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">是否受保：</h2>
                      <el-checkbox v-model="searchForm.hasProtect"></el-checkbox>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">是否不受保：</h2>
                      <el-checkbox v-model="searchForm.hasNoProtect"></el-checkbox>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">受保截止日期：</h2>
                      <el-date-picker v-model="searchForm.protectDate" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                      </el-date-picker>
                    </li>
                    <li class="global-filter-item">
                      <h2 class="global-filter-item-title">客户所在省：</h2>
                      <el-select v-model="searchForm.province" clearable @change="getCityList" filterable>
                        <el-option v-for="(item,index) in provinceList" :key="index" :label="item" :value="item">
                        </el-option>
                      </el-select>
                    </li>
                    <li class="global-filter-item" v-if="searchForm.province">
                      <h2 class="global-filter-item-title">客户所在市：</h2>
                      <el-select v-model="searchForm.city" clearable filterable>
                        <el-option v-for="(item,index) in cityList" :key="index" :label="item" :value="item">
                        </el-option>
                      </el-select>
                    </li>
                    <li class="global-filter-item">
                      <el-button type="primary" class="global-filter-item-search" @click="rePosts">搜索</el-button>
                    </li>
                    <li class="global-filter-item">
                      <el-button type="primary" class="global-filter-item-search" @click="init">清空</el-button>
                    </li>
                  </ul>
                </li>
              </ul>
              <el-button slot="reference" type="primary" class="global-filter-item-search">更多搜索条件</el-button>
            </el-popover>
          </li>
          <li class="global-filter-item">
            <el-button type="primary" class="global-filter-item-search" @click="rePosts">搜索</el-button>
          </li>
          <li class="global-filter-item">
            <el-button type="primary" class="global-filter-item-search" @click="init">清空</el-button>
          </li>
          <li class="global-filter-item" v-if="operationList.includes('add')">
            <el-button type="primary" class="global-filter-item-search" @click="add">新增</el-button>
          </li>
          <li class="global-filter-item" v-if="operationList.includes('updateBusinessUser')">
            <el-dropdown @command="handleCommandChange">
              <el-button type="primary" class="global-filter-item-search">
                修改<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="commerce">按商务修改</el-dropdown-item>
                <el-dropdown-item command="brand">按品牌修改</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
        </ul>
      </li>
    </ul>
    <div class="global-table-content">
      <div class="global-table-content-a">
        <div class="table-container">
          <el-table :data="dataList" ref="table" style="width: 100%" row-key="id" :row-style="{height: '0'}"
            :cell-style="{padding: '3px'}" max-height="620" border v-loading="tableLoading">
            <el-table-column v-for="(item, index) in tableColumnList" :key="index" :prop="dropCol[index].prop"
              :label="item.label" :show-overflow-tooltip="item.showOverflowTooltip" :width="item.width">
              <template slot-scope="scope">
                <div v-if="dropCol[index].prop == 'status'" class="table_over">
                  <div v-if="scope.row.status == 3
                                    || scope.row.status == 4">
                    <el-tooltip placement="right">
                      <div slot="content">
                        执行一次续&nbsp; {{ scope.row.nextNum }}{{ scope.row.status == 3 ? '天' : '月' }}
                        <br />保护到&nbsp; {{
                        scope.row.status == 4 && !scope.row.finalTime ? '/' :
                        formatterDate(scope.row.finalProtectEndTime)
                        }}
                      </div>
                      <div style="color: #3af790;display: flex;align-items: center;"
                        :style="scope.row.status == 3 ? 'color: rgb(211 174 29);' : scope.row.finalTime ? 'color: #53C93D;' : 'color: #3691F9;'">
                        <div>{{ scope.row.status == 3 ? '新表单' : scope.row.finalTime ? '执行完' : '已签单' }}</div>
                        <div v-if="scope.row.endTime">&nbsp; {{ formatterDate(scope.row.endTime) }}</div>
                      </div>
                    </el-tooltip>
                  </div>
                  <div style="color: red;" v-else>不受保</div>
                </div>
                <div v-else-if="dropCol[index].prop == 'lastFollowTime'" class="table_over">
                  <div v-if="scope.row.lastFollowTime">
                    <el-popover placement="right" width="800" trigger="click">
                      <div v-if="scope.row.id == popoverShowBusinessAccountId">
                        <followList :operation-list="operationList" :is-show="true" :business-account-id="scope.row.id">
                        </followList>
                      </div>
                      <el-button @click="updatePopoverShowBusinessAccountId(scope.row.id)" slot="reference" type="text"
                        v-if="scope.row.lastFollowTime">{{ formatterDate(scope.row.lastFollowTime) }}
                      </el-button>
                    </el-popover>
                  </div>
                </div>
                <div v-else-if="dropCol[index].prop == 'contactPersonTelList'" class="table_over">
                  <el-popover placement="top" width="200" trigger="hover">
                    <div v-if="scope.row.contactPersonTelList && scope.row.contactPersonTelList.length > 0">
                      <div v-for="(item, index) in scope.row.contactPersonTelList" :key="index"
                        :style="'display: flex;align-items: center;' + (index > 0 ? 'padding-top: 10px;' : '')">
                        <div>{{ getTelTypeName(item.type) }}</div>
                        <div style="padding-left: 10px;">{{ item.tel }}</div>
                      </div>
                    </div>
                    <el-button slot="reference" type="text"
                      v-if="scope.row.contactPersonTelList && scope.row.contactPersonTelList.length > 0">查看
                    </el-button>
                  </el-popover>
                </div>
                <div v-else-if="dropCol[index].prop == 'importanceRate'" class="table_over">
                  <div style="width: 150px;" v-if="scope.row.importanceRate">
                    <el-rate v-model="scope.row.importanceRate" disabled allow-half
                      score-template="{scope.row.importanceRate}"></el-rate>
                  </div>
                </div>
                <div v-else-if="dropCol[index].prop == 'createTime'" class="table_over">
                  <div v-if="scope.row.createTime">{{ formatterTime(scope.row.createTime) }}</div>
                </div>
                <div v-else-if="dropCol[index].prop == 'updateTime'" class="table_over">
                  <div v-if="scope.row.updateTime">{{ formatterTime(scope.row.updateTime) }}</div>
                </div>
                <div v-else-if="dropCol[index].prop == 'allocateTime'" class="table_over">
                  <div v-if="scope.row.allocateTime">{{ formatterTime(scope.row.allocateTime) }}</div>
                </div>
                <div v-else-if="dropCol[index].prop == 'finalProtectEndTime'" class="table_over">
                  <div v-if="scope.row.finalProtectEndTime">{{
                    scope.row.status == 4 && !scope.row.finalTime ? '/' : formatterDate(scope.row.finalProtectEndTime)
                    }}
                  </div>
                </div>
                <div v-else class="table_over">
                  <span v-html="scope.row[dropCol[index].prop]"></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-dropdown @command="handleCommand($event, scope.row)">
                  <span class="el-dropdown-link"
                    :style="{color: $store.state.theme.theme_color || '#03C192', cursor: 'pointer'}">
                    操作
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="updateInsured"
                      v-if="operationList.includes('updateInsured') && userInfo.role && ((!userInfo.role.includes(40) && !userInfo.role.includes(55)) || ((userInfo.role.includes(40) || userInfo.role.includes(55)) && userInfo.userId == scope.row.directorIds)) && scope.row.createTime >= scope.row.businessDepartTime">
                      续保跟进
                    </el-dropdown-item>
                    <el-dropdown-item command="viewFollow"
                      v-if="operationList.includes('viewFollow') && userInfo.role && ((!userInfo.role.includes(40) && !userInfo.role.includes(55)) || ((userInfo.role.includes(40) || userInfo.role.includes(55)) && userInfo.userId == scope.row.directorIds)) && scope.row.createTime >= scope.row.businessDepartTime">
                      查看跟进记录
                    </el-dropdown-item>
                    <el-dropdown-item command="edit"
                      v-if="operationList.includes('edit') && userInfo.role && ((!userInfo.role.includes(40) && !userInfo.role.includes(55)) || ((userInfo.role.includes(40) || userInfo.role.includes(55)) && userInfo.userId == scope.row.directorIds)) && scope.row.createTime >= scope.row.businessDepartTime">
                      编辑
                    </el-dropdown-item>
                    <el-dropdown-item command="del"
                      v-if="operationList.includes('edit') && userInfo.role && ((!userInfo.role.includes(40) && !userInfo.role.includes(55)) || ((userInfo.role.includes(40) || userInfo.role.includes(55)) && userInfo.userId == scope.row.directorIds)) && scope.row.createTime >= scope.row.businessDepartTime">
                      删除
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="global-page">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="pageSizes"
            :page-size="pageSize" :current-page="pageNum" background layout="sizes, total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="选择商务修改" :visible.sync="selectCommerceDialog" @close="selectCommerceDialogClose" width="60%">
      <div>
        <div style="width: 100%;display: flex;align-items: center;justify-content: center">
          <el-steps :active="active" finish-status="success" style="width: 65%;">
            <el-step title="步骤 1"></el-step>
            <el-step title="步骤 2"></el-step>
          </el-steps>
        </div>
        <div v-show="active === 0">
          <div>
            <div style="margin: 20px 0">
              <span>关键字：</span>
              <el-input v-model="commerceSearchForm.keyword" placeholder="请输入商务名字" style="width: 250px"
                clearable></el-input>
              <el-button style="margin-left: 20px" type="primary" class="global-filter-item-search"
                @click="getCommerceList">搜索</el-button>
            </div>
            <el-table ref="commerceTable" :data="commerceListData" style="width: 100%" :row-style="{height: '0'}"
              :cell-style="{padding: '3px'}" height="350" border v-loading="commerceTableLoading"
              @selection-change="handleCommerceSelectionChange">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="username" label="商务名字" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="telephone" label="手机号" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="basicSalary" label="底薪" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="performanceGoodsValue" label="绩效货值" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="gradeName" label="职称" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="area" label="区域" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="groupName" label="分组" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="teamType" label="组内职务" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{
                  scope.row.teamType ? (scope.row.teamType == 1 ? '组长' : scope.row.teamType == 2 ? '组员' : '--') : '-'
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="businessType" label="商务类型" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{ scope.row.businessType ? (scope.row.businessType == 1 ? 'KA' : 'BD') : '-' }}
                </template>
              </el-table-column>
              <el-table-column prop="departName" label="部门" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="totalGrossProfit" label="总毛利润" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{ scope.row.totalGrossProfit ? scope.row.totalGrossProfit : '-' }}
                </template>
              </el-table-column>
              <el-table-column prop="joinTime" label="加入时间" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{ formatterDate(scope.row.joinTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{ formatterTime(scope.row.createTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{
                  scope.row.status ? (scope.row.status == 1 ? '可用' : scope.row.status == 2 ? '已辞职' : '--') : '-'
                  }}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="margin-top: 20px">
            <el-pagination @size-change="handleCommerceSizeChange" @current-change="handleCommerceCurrentChange"
              :page-sizes="pageSizes" :page-size="commercePageSize" :current-page="commercePageNum" background
              layout="sizes, total, prev, pager, next" :total="commerceTotal">
            </el-pagination>
          </div>
        </div>
        <div v-show="active === 1">
          <div>
            <div style="margin: 20px 0">
              <span>关键字：</span>
              <el-input v-model="commerceSelectForm.keyword" placeholder="请输入商务名字" style="width: 250px"
                clearable></el-input>
              <el-button style="margin-left: 20px" type="primary" class="global-filter-item-search"
                @click="getCommerceSelectList">搜索</el-button>
            </div>
            <el-table ref="commerceSelectTable" :data="commerceSelectListData" style="width: 100%"
              :row-style="{height: '0'}" :cell-style="{padding: '3px'}" height="350" border
              v-loading="commerceSelectTableLoading" highlight-current-row
              @current-change="selectCommerceCurrentChange">
              <el-table-column type="index" width="50">
              </el-table-column>
              <el-table-column prop="username" label="商务名字" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="telephone" label="手机号" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="basicSalary" label="底薪" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="performanceGoodsValue" label="绩效货值" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="gradeName" label="职称" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="area" label="区域" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="groupName" label="分组" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="teamType" label="组内职务" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{
                  scope.row.teamType ? (scope.row.teamType == 1 ? '组长' : scope.row.teamType == 2 ? '组员' : '--') : '-'
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="businessType" label="商务类型" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{ scope.row.businessType ? (scope.row.businessType == 1 ? 'KA' : 'BD') : '-' }}
                </template>
              </el-table-column>
              <el-table-column prop="departName" label="部门" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="totalGrossProfit" label="总毛利润" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{ scope.row.totalGrossProfit ? scope.row.totalGrossProfit : '-' }}
                </template>
              </el-table-column>
              <el-table-column prop="joinTime" label="加入时间" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{ formatterDate(scope.row.joinTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{ formatterTime(scope.row.createTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{
                  scope.row.status ? (scope.row.status == 1 ? '可用' : scope.row.status == 2 ? '已辞职' : '--') : '-'
                  }}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="margin-top: 20px">
            <el-pagination @size-change="commerceSizeChange" @current-change="commerceCurrentChange"
              :page-sizes="pageSizes" :page-size="commerceSelectPageSize" :current-page="commerceSelectPageNum"
              background layout="sizes, total, prev, pager, next" :total="commerceSelectTotal">
            </el-pagination>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectCommerceDialog = false">取 消</el-button>
        <el-button type="primary" v-show="active === 0" @click="nextConfirm">下一步</el-button>
        <el-button type="primary" v-show="active === 1" @click="previousConfirm">上一步</el-button>
        <el-button type="primary" v-show="active === 1" @click="updateConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="选择品牌修改" :visible.sync="selectBrandDialog" @close="selectBrandDialogClose" width="60%">
      <div>
        <div style="width: 100%;display: flex;align-items: center;justify-content: center">
          <el-steps :active="brandActive" finish-status="success" style="width: 65%;">
            <el-step title="步骤 1"></el-step>
            <el-step title="步骤 2"></el-step>
          </el-steps>
        </div>
        <div v-show="brandActive === 0">
          <div>
            <div style="margin: 20px 0">
              <span>关键字：</span>
              <el-input v-model="brandSearchForm.keyword" placeholder="请输入品牌或公司名称" style="width: 250px"
                clearable></el-input>
              <el-button style="margin-left: 20px" type="primary" class="global-filter-item-search"
                @click="getBrandList">搜索</el-button>
            </div>
            <el-table :data="brandDataList" ref="table" style="width: 100%" row-key="id" :row-style="{height: '0'}"
              :cell-style="{padding: '3px'}" max-height="350" border v-loading="brandTableLoading"
              @selection-change="handleBrandSelectChange">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column v-for="(item, index) in tableColumnList" :key="index" :prop="dropCol[index].prop"
                :label="item.label" :show-overflow-tooltip="item.showOverflowTooltip" :width="item.width">
                <template slot-scope="scope">
                  <div v-if="dropCol[index].prop == 'status'" class="table_over">
                    <div v-if="scope.row.status == 3
                                    || scope.row.status == 4">
                      <el-tooltip placement="right">
                        <div slot="content">
                          执行一次续&nbsp; {{ scope.row.nextNum }}{{ scope.row.status == 3 ? '天' : '月' }}
                          <br />保护到&nbsp; {{
                          scope.row.status == 4 && !scope.row.finalTime ? '/' :
                          formatterDate(scope.row.finalProtectEndTime)
                          }}
                        </div>
                        <div style="color: #3af790;display: flex;align-items: center;"
                          :style="scope.row.status == 3 ? 'color: rgb(211 174 29);' : scope.row.finalTime ? 'color: #53C93D;' : 'color: #3691F9;'">
                          <div>{{ scope.row.status == 3 ? '新表单' : scope.row.finalTime ? '执行完' : '已签单' }}</div>
                          <div v-if="scope.row.endTime">&nbsp; {{ formatterDate(scope.row.endTime) }}</div>
                        </div>
                      </el-tooltip>
                    </div>
                    <div style="color: red;" v-else>不受保</div>
                  </div>
                  <div v-else-if="dropCol[index].prop == 'lastFollowTime'" class="table_over">
                    <div v-if="scope.row.lastFollowTime">
                      {{ formatterDate(scope.row.lastFollowTime) }}
                    </div>
                  </div>
                  <div v-else-if="dropCol[index].prop == 'contactPersonTelList'" class="table_over">
                    <el-popover placement="top" width="200" trigger="hover">
                      <div v-if="scope.row.contactPersonTelList && scope.row.contactPersonTelList.length > 0">
                        <div v-for="(item, index) in scope.row.contactPersonTelList" :key="index"
                          :style="'display: flex;align-items: center;' + (index > 0 ? 'padding-top: 10px;' : '')">
                          <div>{{ getTelTypeName(item.type) }}</div>
                          <div style="padding-left: 10px;">{{ item.tel }}</div>
                        </div>
                      </div>
                      <el-button slot="reference" type="text"
                        v-if="scope.row.contactPersonTelList && scope.row.contactPersonTelList.length > 0">查看
                      </el-button>
                    </el-popover>
                  </div>
                  <div v-else-if="dropCol[index].prop == 'importanceRate'" class="table_over">
                    <div style="width: 150px;" v-if="scope.row.importanceRate">
                      <el-rate v-model="scope.row.importanceRate" disabled allow-half
                        score-template="{scope.row.importanceRate}"></el-rate>
                    </div>
                  </div>
                  <div v-else-if="dropCol[index].prop == 'createTime'" class="table_over">
                    <div v-if="scope.row.createTime">{{ formatterTime(scope.row.createTime) }}</div>
                  </div>
                  <div v-else-if="dropCol[index].prop == 'updateTime'" class="table_over">
                    <div v-if="scope.row.updateTime">{{ formatterTime(scope.row.updateTime) }}</div>
                  </div>
                  <div v-else-if="dropCol[index].prop == 'allocateTime'" class="table_over">
                    <div v-if="scope.row.allocateTime">{{ formatterTime(scope.row.allocateTime) }}</div>
                  </div>
                  <div v-else-if="dropCol[index].prop == 'finalProtectEndTime'" class="table_over">
                    <div v-if="scope.row.finalProtectEndTime">{{
                      scope.row.status == 4 && !scope.row.finalTime ? '/' : formatterDate(scope.row.finalProtectEndTime)
                      }}
                    </div>
                  </div>
                  <div v-else class="table_over">
                    <span v-html="scope.row[dropCol[index].prop]"></span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="margin-top: 20px">
            <el-pagination @size-change="handleBrandSizeChange" @current-change="handleBrandCurrentChange"
              :page-sizes="pageSizes" :page-size="brandPageSize" :current-page="brandPageNum" background
              layout="sizes, total, prev, pager, next" :total="brandTotal">
            </el-pagination>
          </div>
        </div>
        <div v-show="brandActive === 1">
          <div>
            <div style="margin: 20px 0">
              <span>关键字：</span>
              <el-input v-model="commerceSelectForm.keyword" placeholder="请输入商务名字" style="width: 250px"
                clearable></el-input>
              <el-button style="margin-left: 20px" type="primary" class="global-filter-item-search"
                @click="getCommerceSelectList">搜索</el-button>
            </div>
            <el-table ref="commerceSelectTable" :data="commerceSelectListData" style="width: 100%"
              :row-style="{height: '0'}" :cell-style="{padding: '3px'}" height="350" border
              v-loading="commerceSelectTableLoading" highlight-current-row
              @current-change="selectCommerceCurrentChange">
              <el-table-column type="index" width="50">
              </el-table-column>
              <el-table-column prop="username" label="商务名字" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="telephone" label="手机号" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="basicSalary" label="底薪" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="performanceGoodsValue" label="绩效货值" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="gradeName" label="职称" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="area" label="区域" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="groupName" label="分组" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="teamType" label="组内职务" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{
                  scope.row.teamType ? (scope.row.teamType == 1 ? '组长' : scope.row.teamType == 2 ? '组员' : '--') : '-'
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="businessType" label="商务类型" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{ scope.row.businessType ? (scope.row.businessType == 1 ? 'KA' : 'BD') : '-' }}
                </template>
              </el-table-column>
              <el-table-column prop="departName" label="部门" show-overflow-tooltip width="150px">
              </el-table-column>
              <el-table-column prop="totalGrossProfit" label="总毛利润" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{ scope.row.totalGrossProfit ? scope.row.totalGrossProfit : '-' }}
                </template>
              </el-table-column>
              <el-table-column prop="joinTime" label="加入时间" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{ formatterDate(scope.row.joinTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{ formatterTime(scope.row.createTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                  {{
                  scope.row.status ? (scope.row.status == 1 ? '可用' : scope.row.status == 2 ? '已辞职' : '--') : '-'
                  }}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="margin-top: 20px">
            <el-pagination @size-change="commerceSizeChange" @current-change="commerceCurrentChange"
              :page-sizes="pageSizes" :page-size="commerceSelectPageSize" :current-page="commerceSelectPageNum"
              background layout="sizes, total, prev, pager, next" :total="commerceSelectTotal">
            </el-pagination>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectBrandDialog = false">取 消</el-button>
        <el-button type="primary" v-show="brandActive === 0" @click="brandNextConfirm">下一步</el-button>
        <el-button type="primary" v-show="brandActive === 1" @click="brandPreviousConfirm">上一步</el-button>
        <el-button type="primary" v-show="brandActive === 1" @click="brandUpdateConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import APISysLabel from "@/api/apiSysLabel";
import APIBusinessAccount from "@/api/apiBusinessAccount";
import APIBusiness from "@/api/apiBusiness";
import ApiUser from "../../../api/apiUser";
import followList from "@/views/businessAccount/pages/follow/includes/Follow";
import Sortable from 'sortablejs'

export default {
  name: "BusinessAccountDetail",
  components: {
    followList,
  },
  props: {
    operationList: Array,
    isShow: Boolean,
  },
  watch: {
    isShow(val) {
      if (val) {
        this.getPost()
      }
    },
    telTypeList(val) {
      if (val) {
        if (this.dataList && this.dataList.length > 0) {
          this.dataList.forEach(item => {
            if (item.contactPersonTel) {
              item.contactPersonTelList = JSON.parse(item.contactPersonTel)
              if (item.contactPersonTelList.length > 0 && this.telTypeList && this.telTypeList.length > 0) {
                item.contactPersonTelList.forEach(contactPersonTelItem => {
                  contactPersonTelItem.typeName = this.getTelTypeName(contactPersonTelItem.type)
                })
              }
            }
          })
        }
      }
    },
  },
  data() {
    return {
      userInfo: {},
      // 表格相关
      tableLoading: true,
      dataList: [],
      pageSize: 30,
      pageNum: 1,
      total: 0,
      pageSizes: [30, 50, 100],
      selectData: [],
      tokenData: {
        token: "",
      },
      searchForm: {
        keyword: null,
        accurateSearchKeyword: null,
        projectIds: null,
        date: null,
        customerStatus: null,
        customerStage: null,
        customerType: null,
        customerProductType: null,
        customerLevel: null,
        customerSource: null,
        businessId: null,
        departId: null,
        lastFollowDate: null,
        areaId: null,
        businessType: null,
        followDate: null,
        checkDate: null,
        hasCooperate: false,
        hasConnect: false,
        hasProtect: false,
        hasNoProtect: false,
        hasOnlyBusiness: true,
        province: null,
        city: null,
        protectDate: null,
        protectTypes: null,
      },
      projectList: [],
      dateShow: false,
      tableProjectLoading: false,
      customerStatusList: [],
      customerStageList: [],
      customerTypeList: [],
      customerProductTypeList: [],
      customerLevelList: [],
      customerSourceList: [],
      businessList: [],
      departList: [],
      telTypeList: [],
      areaList: [],
      businessTypeList: [
        {
          label: 'KA',
          value: 1,
        },
        {
          label: 'BD',
          value: 2,
        },
      ],
      provinceList: [],
      cityList: [],
      domObj: null,
      popoverShowBusinessAccountId: null,
      tableColumnList: [
        {
          prop: "status",
          label: "受保",
          width: "200px",
          showOverflowTooltip: true,
          columnIndex: 1,
        },
        {
          prop: "lastFollowTime",
          label: "最后跟进时间",
          width: "150px",
          showOverflowTooltip: false,
          columnIndex: 2,
        },
        {
          prop: "departName",
          label: "部门",
          width: "100px",
          showOverflowTooltip: true,
          columnIndex: 3,
        },
        {
          prop: "companyName",
          label: "公司名称",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 4,
        },
        {
          prop: "companyScale",
          label: "公司规模",
          width: "100px",
          showOverflowTooltip: true,
          columnIndex: 5,
        },
        {
          prop: "brandsName",
          label: "对接品牌",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 6,
        },
        {
          prop: "contactPersonName",
          label: "对接人姓名",
          width: "100px",
          showOverflowTooltip: true,
          columnIndex: 7,
        },
        {
          prop: "contactPersonPost",
          label: "对接人岗位",
          width: "100px",
          showOverflowTooltip: true,
          columnIndex: 8,
        },
        {
          prop: "contactPersonTelList",
          label: "对接人联系方式",
          width: "200px",
          showOverflowTooltip: true,
          columnIndex: 9,
        },
        {
          prop: "customerAddress",
          label: "客户地址",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 10,
        },
        {
          prop: "customerStatusName",
          label: "客户状态",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 11,
        },
        {
          prop: "customerStageName",
          label: "客户阶段",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 12,
        },
        {
          prop: "directorName",
          label: "负责人",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 13,
        },
        {
          prop: "collaboratorNames",
          label: "协同人",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 14,
        },
        {
          prop: "customerTypeName",
          label: "客户类型",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 15,
        },
        {
          prop: "customerProductTypeName",
          label: "客户产品类型",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 16,
        },
        {
          prop: "customerLevelName",
          label: "客户级别",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 17,
        },
        {
          prop: "importanceRate",
          label: "重要程度",
          width: "150px",
          showOverflowTooltip: false,
          columnIndex: 18,
        },
        {
          prop: "customerSourceName",
          label: "客户来源",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 19,
        },
        {
          prop: "customerOnlineShop",
          label: "客户网上旗舰店",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 20,
        },
        {
          prop: "createTime",
          label: "创建时间",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 21,
        },
        {
          prop: "updateTime",
          label: "更新时间",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 22,
        },
        {
          prop: "allocateTime",
          label: "分配时间",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 23,
        },
        {
          prop: "createUserName",
          label: "创建人",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 24,
        },
        {
          prop: "totalProjectPrice",
          label: "项目金额合计",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 25,
        },
        {
          prop: "fans",
          label: "旗舰店粉丝量",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 26,
        },
        {
          prop: "remark",
          label: "备注",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 27,
        },
        {
          prop: "finalProtectEndTime",
          label: "保护结束时间",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 28,
        },
      ],
      dropCol: [
        {
          prop: "status",
          label: "受保",
          width: "200px",
          showOverflowTooltip: true,
          columnIndex: 1,
        },
        {
          prop: "lastFollowTime",
          label: "最后跟进时间",
          width: "150px",
          showOverflowTooltip: false,
          columnIndex: 2,
        },
        {
          prop: "departName",
          label: "部门",
          width: "100px",
          showOverflowTooltip: true,
          columnIndex: 3,
        },
        {
          prop: "companyName",
          label: "公司名称",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 4,
        },
        {
          prop: "companyScale",
          label: "公司规模",
          width: "100px",
          showOverflowTooltip: true,
          columnIndex: 5,
        },
        {
          prop: "brandsName",
          label: "对接品牌",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 6,
        },
        {
          prop: "contactPersonName",
          label: "对接人姓名",
          width: "100px",
          showOverflowTooltip: true,
          columnIndex: 7,
        },
        {
          prop: "contactPersonPost",
          label: "对接人岗位",
          width: "100px",
          showOverflowTooltip: true,
          columnIndex: 8,
        },
        {
          prop: "contactPersonTelList",
          label: "对接人联系方式",
          width: "200px",
          showOverflowTooltip: true,
          columnIndex: 9,
        },
        {
          prop: "customerAddress",
          label: "客户地址",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 10,
        },
        {
          prop: "customerStatusName",
          label: "客户状态",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 11,
        },
        {
          prop: "customerStageName",
          label: "客户阶段",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 12,
        },
        {
          prop: "directorName",
          label: "负责人",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 13,
        },
        {
          prop: "collaboratorNames",
          label: "协同人",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 14,
        },
        {
          prop: "customerTypeName",
          label: "客户类型",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 15,
        },
        {
          prop: "customerProductTypeName",
          label: "客户产品类型",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 16,
        },
        {
          prop: "customerLevelName",
          label: "客户级别",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 17,
        },
        {
          prop: "importanceRate",
          label: "重要程度",
          width: "150px",
          showOverflowTooltip: false,
          columnIndex: 18,
        },
        {
          prop: "customerSourceName",
          label: "客户来源",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 19,
        },
        {
          prop: "customerOnlineShop",
          label: "客户网上旗舰店",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 20,
        },
        {
          prop: "createTime",
          label: "创建时间",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 21,
        },
        {
          prop: "updateTime",
          label: "更新时间",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 22,
        },
        {
          prop: "allocateTime",
          label: "分配时间",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 23,
        },
        {
          prop: "createUserName",
          label: "创建人",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 24,
        },
        {
          prop: "totalProjectPrice",
          label: "项目金额合计",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 25,
        },
        {
          prop: "fans",
          label: "旗舰店粉丝量",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 26,
        },
        {
          prop: "remark",
          label: "备注",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 27,
        },
        {
          prop: "finalProtectEndTime",
          label: "保护结束时间",
          width: "150px",
          showOverflowTooltip: true,
          columnIndex: 28,
        },
      ],
      protectTypeList: [
        {
          label: '新表单',
          value: 1,
        },
        {
          label: '已签单',
          value: 2,
        },
        {
          label: '执行完',
          value: 3,
        },
      ],
      tooltipContent: '未选择项目数据，默认选择全部项目进行操作',
      selectCommerceDialog: false,
      commerceListData: [],
      commerceSearchForm: {
        keyword: null,
      },
      commercePageNum: 1,
      commercePageSize: 30,
      commerceTotal: 0,
      commerceTableLoading: false,
      commerceSelection: [],
      commerceSelectForm: {
        keyword: null,
      },
      commerceSelectListData: [],
      commerceSelectTableLoading: false,
      commerceSelectPageSize: 30,
      commerceSelectPageNum: 1,
      commerceSelectTotal: 0,
      selectCommerce: '',
      active: 0,
      selectBrandDialog: false,
      brandActive: 0,
      brandSearchForm: {
        keyword: null,
      },
      brandPageSize: 30,
      brandPageNum: 1,
      brandTotal: 0,
      brandDataList: [],
      brandTableLoading: false,
      brandSelectData: []
    };
  },
  activated() {
    this.pageNum = 1;
    this.tokenData.token = this.$store.state.token;
    this.userInfo = JSON.parse(localStorage.getItem("mujinguserInfo"))
    if (this.userInfo.role && (this.userInfo.role.includes(40) || this.userInfo.role.includes(55))) {
      this.searchForm.hasOnlyBusiness = true
    } else {
      this.searchForm.hasOnlyBusiness = false
    }
    this.getProvinceList()
    this.getSysList()
    this.getBusinessList()
    if (this.$route.query.departId) {
      this.searchForm.departId = Number(this.$route.query.departId)
    } else {
      this.searchForm.departId = null
    }
    if (this.$route.query.startTime && this.$route.query.endTime) {
      this.searchForm.date = [new Date(Number(this.$route.query.startTime)), new Date(Number(this.$route.query.endTime))]
    } else {
      this.searchForm.date = null
    }
    if (this.$route.query.followStartTime && this.$route.query.followEndTime) {
      this.searchForm.followDate = [new Date(Number(this.$route.query.followStartTime)), new Date(Number(this.$route.query.followEndTime))]
    } else {
      this.searchForm.followDate = null
    }
    if (this.$route.query.checkStartTime && this.$route.query.checkEndTime) {
      this.searchForm.checkDate = [new Date(Number(this.$route.query.checkStartTime)), new Date(Number(this.$route.query.checkEndTime))]
    } else {
      this.searchForm.checkDate = null
    }
    if (this.$route.query.protectStartTime && this.$route.query.protectEndTime) {
      this.searchForm.protectDate = [new Date(Number(this.$route.query.protectStartTime)), new Date(Number(this.$route.query.protectEndTime))]
    } else {
      this.searchForm.protectDate = null
    }
    if (this.$route.query.businessId) {
      this.searchForm.businessId = Number(this.$route.query.businessId)
    } else {
      this.searchForm.businessId = null
    }
    if (this.$route.query.areaId) {
      this.searchForm.areaId = Number(this.$route.query.areaId)
    } else {
      this.searchForm.areaId = null
    }
    if (this.$route.query.hasConnect) {
      this.searchForm.hasConnect = Boolean(this.$route.query.hasConnect)
    } else {
      this.searchForm.hasConnect = false
    }
    if (this.$route.query.hasCooperate) {
      this.searchForm.hasCooperate = Boolean(this.$route.query.hasCooperate)
    } else {
      this.searchForm.hasCooperate = false
    }
    if (this.$route.query.hasProtect) {
      this.searchForm.hasProtect = Boolean(this.$route.query.hasProtect)
    } else {
      this.searchForm.hasProtect = false
    }
    if (this.$route.query.hasNoProtect) {
      this.searchForm.hasNoProtect = Boolean(this.$route.query.hasNoProtect)
    } else {
      this.searchForm.hasNoProtect = false
    }
    if (this.$route.query.province) {
      this.searchForm.province = this.$route.query.province
    } else {
      this.searchForm.province = null
    }
    if (this.$route.query.city) {
      this.searchForm.city = this.$route.query.city
      this.getCityList()
    } else {
      this.searchForm.city = null
    }
    this.getPost()
    // this.$refs.table.bodyWrapper.id = 'scrollBar'
    // this.scrollFunction(this.domObj, 'scrollBar')
  },
  mounted() {
    this.tokenData.token = this.$store.state.token
    if (localStorage.getItem("businessAccountTableSort")) {
      let list = JSON.parse(localStorage.getItem("businessAccountTableSort"))
      let modelList = this.dropCol
      // 更新列表，在列表最后加上缺少的列
      if (list && list.length > 0) {
        if (list.length != modelList.length) {
          modelList.forEach((item, index) => {
            let hasAdd = this.containsItem(list, item)
            if (!hasAdd) {
              list.push(item)
            }
          })
        }
      }
      this.dropCol = list
      this.tableColumnList = JSON.parse(JSON.stringify(this.dropCol))
    }
    this.columnDrop()
    // setTimeout(() => {
    //     this.initDrag()
    // }, 1000)
    this.$bus.$on('clearSearchParams', () => {
      this.searchForm = {
        keyword: null,
        accurateSearchKeyword: null,
        projectIds: null,
        date: null,
        customerStatus: null,
        customerStage: null,
        customerType: null,
        customerProductType: null,
        customerLevel: null,
        customerSource: null,
        businessId: null,
        departId: null,
        lastFollowDate: null,
        areaId: null,
        businessType: null,
        followDate: null,
        checkDate: null,
        hasCooperate: false,
        hasConnect: false,
        hasProtect: false,
        hasNoProtect: false,
        hasOnlyBusiness: true,
        province: null,
        city: null,
        protectDate: null,
        protectTypes: null,
      }
    })
  },
  methods: {
    containsItem(arr, item) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].columnIndex == item.columnIndex) {
          return true;
        }
      }
      return false;
    },
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 100,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
          localStorage.setItem("businessAccountTableSort", JSON.stringify(this.dropCol))
        }
      })
    },
    initDrag() {
      const container = document.querySelector('.table-container');
      let startX;
      let currentColumnWidths = [];

      console.log(container.getElementsByClassName('el-table__header'))
      console.log("=========")
      for (let i = 0; i < this.tableColumnList.length - 1; i++) {
        const column = container.getElementsByClassName('el-table__header')[i];
        console.log(column)
        console.log("=====22====")
        column.addEventListener('mousedown', function (e) {
          e.preventDefault();

          startX = e.clientX;
          currentColumnWidths = Array.from(this.parentNode.children).map((child) => child.offsetWidth);
        });

        column.addEventListener('mouseup', () => {
          startX = null;
          currentColumnWidths = [];
        });

        column.addEventListener('mousemove', (e) => {
          if (!startX || !currentColumnWidths.length) return;

          const deltaX = e.clientX - startX;
          const newColumnWidths = currentColumnWidths.slice();

          for (let j = 0; j < newColumnWidths.length - 1; j++) {
            newColumnWidths[j + 1] += deltaX / (newColumnWidths.length - 1);

            if (newColumnWidths[j + 1] <= 50) break; // 限制最小宽度为50px
          }

          for (let k = 0; k < newColumnWidths.length; k++) {
            container.getElementsByClassName('el-table__header')[k].style.width = `${newColumnWidths[k]}px`;
          }
        });
      }
    },
    dragEndTable(val) {
      console.log(val)
    },
    updatePopoverShowBusinessAccountId(val) {
      this.popoverShowBusinessAccountId = val
    },
    scrollFunction(obj, id) {
      obj = document.getElementById(id)
      if (obj.attachEvent) {
        obj.attachEvent('onmousewheel', this.mouseScroll(obj))
      } else if (obj.addEventListener) {
        obj.addEventListener('DOMMouseScroll', this.mouseScroll(obj), false)
      }
      obj.onmousewheel = obj.onmousewheel = this.mouseScroll(obj)
    },
    mouseScroll(obj) {
      return function () {
        let e = window.event || document.all ? window.event : arguments[0] ? arguments[0] : event
        let detail, moveForwardStep, moveBackStep
        let step = 0
        if (e.wheelDelta) { // google 下滑负数： -120
          detail = e.wheelDelta
          moveForwardStep = -1
          moveBackStep = 1
        } else if (e.detail) { // firefox 下滑正数：3
          detail = event.detail
          moveForwardStep = 1
          moveBackStep = -1
        }
        step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
        // e.preventDefault()
        let left = obj.querySelector('table').clientWidth - obj.clientWidth
        // 这里是为了向右滚动后再向下滚动，向左滚动后再向上滚动，如果不需要，只需要写e.preventDefault()
        if (moveForwardStep === -1) {//google
          if (detail > 0) {//向上
            if (obj.scrollLeft > 0) {
              e.preventDefault()
            } else {
              return true
            }
          } else {
            if (obj.scrollLeft < left) {
              e.preventDefault()
            } else {
              return true
            }
          }
        } else {//firefox
          if (detail > 0) {//向下
            if (obj.scrollLeft < left) {
              e.preventDefault()
            } else {
              return true
            }
          } else {
            if (obj.scrollLeft > 0) {
              e.preventDefault()
            } else {
              return true
            }
          }
        }
        obj.scrollLeft = obj.scrollLeft + step
      }
    },
    handleCommand(e, row) {
      if (e == "viewFollow") {
        this.viewFollow(row)
      } else if (e == "edit") {
        this.edit(row)
      } else if (e == "del") {
        this.handleClickDel(row)
      } else if (e == "updateInsured") {
        this.handleUpdateInsured(row)
      }
    },
    handleUpdateInsured(row) {
      const params = {
        token: this.$store.state.token,
        businessUserId: row.id,
      };
      APIBusinessAccount.doUpdateBusinessInsured(params).then((res) => {
        if (res.key === 1000) {
          this.$message({
            message: '续保成功',
            type: 'success'
          });
          this.getPost();
        }
      });
    },
    changeArea(val) {
      if (val) {
        let areaName = ""
        this.areaList.forEach(item => {
          if (item.id == val) {
            areaName = item.sysValueName
          }
        })
        if (areaName) {
          this.getBusinessList(areaName)
        }
      }
    },
    getProvinceList() {
      const params = {
        token: this.$store.state.token,
      };
      APISysLabel.get_province(params).then((res) => {
        if (res.key === 1000) {
          res = res.result;
          this.provinceList = res.list
        }
      });
    },
    getCityList() {
      const params = {
        token: this.$store.state.token,
        province: this.searchForm.province
      };
      APISysLabel.get_city(params).then((res) => {
        if (res.key === 1000) {
          res = res.result;
          this.cityList = res.data
        }
      });
    },
    viewFollow(row) {
      this.$router.push({
        path: '/follow',
        query: {
          businessAccountId: row.id,
        }
      })
    },
    getTelTypeName(type) {
      let name = ""
      this.telTypeList.forEach(item => {
        if (item.id == type) {
          name = item.sysValueName
        }
      })
      return name
    },
    handleClickDel(row) {
      const params = {
        token: this.$store.state.token,
        businessAccountId: row.id,
      };
      APIBusinessAccount.doDelBusinessAccount(params).then((res) => {
        if (res.key === 1000) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getPost();
        }
      });
    },
    edit(row) {
      this.$router.push({
        path: '/EditBusinessAccount',
        query: {
          businessAccountId: row.id,
        }
      })
    },
    add() {
      this.$router.push({
        path: '/EditBusinessAccount',
      })
    },
    getBusinessList(area) {
      const params = {
        token: this.$store.state.token,
      };
      if (area) {
        params.area = area;
      }
      APIBusiness.getBusinessList(params).then((res) => {
        if (res.key === 1000) {
          res = res.result;
          this.businessList = res.list
        }
      });
    },
    getSysList() {
      const params = {
        token: this.$store.state.token,
        sysLabelIds: "3,23,24,25,26,27,28,29,32",
      };
      APISysLabel.getSysLabelValueManageList(params).then((res) => {
        if (res.key === 1000) {
          res = res.result;
          if (res.data) {
            this.areaList = res.data[3]
            this.telTypeList = res.data[23]
            this.customerStatusList = res.data[24]
            this.customerStageList = res.data[25]
            this.customerTypeList = res.data[26]
            this.customerProductTypeList = res.data[27]
            this.customerLevelList = res.data[28]
            this.customerSourceList = res.data[29]
            this.departList = res.data[32]
          }
        }
      });
    },
    formatterTime(time) {
      return this.$moment(time).format("YYYY-MM-DD HH:mm:ss");
    },
    formatterDate(time) {
      return this.$moment(time).format("YYYY-MM-DD");
    },
    // 全局初始化
    init() {
      // 搜索条件重置
      this.searchForm = {
        keyword: null,
        accurateSearchKeyword: null,
        projectIds: null,
        date: null,
        customerStatus: null,
        customerStage: null,
        customerType: null,
        customerProductType: null,
        customerLevel: null,
        customerSource: null,
        businessId: null,
        departId: null,
        lastFollowDate: null,
        areaId: null,
        businessType: null,
        followDate: null,
        checkDate: null,
        hasCooperate: false,
        hasConnect: false,
        hasProtect: false,
        hasNoProtect: false,
        hasOnlyBusiness: true,
        province: null,
        city: null,
        protectDate: null,
        protectTypes: null,
      };
      if (this.userInfo.role && (this.userInfo.role.includes(40) || this.userInfo.role.includes(55))) {
        this.searchForm.hasOnlyBusiness = true
      } else {
        this.searchForm.hasOnlyBusiness = false
      }
      this.rePosts();
    },
    // 分页pageSize改变
    handleSizeChange(e) {
      this.pageSize = e;
      this.rePosts();
    },
    // 分页pageNum改变
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getPost();
    },
    // 重新请求
    rePosts() {
      this.pageNum = 1;
      this.dataList = [];
      this.getPost();
    },
    // 表格列表
    getPost() {
      this.tableLoading = true;
      const params = {
        token: this.$store.state.token,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      if (this.searchForm.protectTypes) {
        params.protectType = this.searchForm.protectTypes.join(",")
      }
      if (this.searchForm.date && this.searchForm.date.length > 1) {
        params.startTime = new Date(this.searchForm.date[0]).getTime()
        params.endTime = new Date(this.searchForm.date[1]).getTime()
      }
      if (this.searchForm.lastFollowDate && this.searchForm.lastFollowDate.length > 1) {
        params.lastFollowStartTime = new Date(this.searchForm.lastFollowDate[0]).getTime()
        params.lastFollowEndTime = new Date(this.searchForm.lastFollowDate[1]).getTime()
      }
      if (this.searchForm.followDate && this.searchForm.followDate.length > 1) {
        params.followStartTime = new Date(this.searchForm.followDate[0]).getTime()
        params.followEndTime = new Date(this.searchForm.followDate[1]).getTime()
      }
      if (this.searchForm.checkDate && this.searchForm.checkDate.length > 1) {
        params.checkStartTime = new Date(this.searchForm.checkDate[0]).getTime()
        params.checkEndTime = new Date(this.searchForm.checkDate[1]).getTime()
      }
      if (this.searchForm.protectDate && this.searchForm.protectDate.length > 1) {
        params.protectStartTime = new Date(this.searchForm.protectDate[0]).getTime()
        params.protectEndTime = new Date(this.searchForm.protectDate[1]).getTime()
      }
      if (this.searchForm.projectIds && this.searchForm.projectIds.length > 0) {
        params.projectIds = this.searchForm.projectIds.join(",");
      }
      if (this.searchForm.departId) {
        params.departId = this.searchForm.departId;
      }
      if (this.searchForm.customerStatus) {
        params.customerStatus = this.searchForm.customerStatus;
      }
      if (this.searchForm.customerStage) {
        params.customerStage = this.searchForm.customerStage;
      }
      if (this.searchForm.customerType) {
        params.customerType = this.searchForm.customerType;
      }
      if (this.searchForm.customerProductType) {
        params.customerProductType = this.searchForm.customerProductType;
      }
      if (this.searchForm.customerLevel) {
        params.customerLevel = this.searchForm.customerLevel;
      }
      if (this.searchForm.customerSource) {
        params.customerSource = this.searchForm.customerSource;
      }
      if (this.searchForm.businessId) {
        params.businessId = this.searchForm.businessId;
      }
      if (this.searchForm.areaId) {
        params.areaId = this.searchForm.areaId;
      }
      if (this.searchForm.businessType) {
        params.businessType = this.searchForm.businessType;
      }
      if (this.searchForm.hasCooperate) {
        params.hasCooperate = this.searchForm.hasCooperate;
      }
      if (this.searchForm.hasConnect) {
        params.hasConnect = this.searchForm.hasConnect;
      }
      if (this.searchForm.hasProtect) {
        params.hasProtect = this.searchForm.hasProtect;
      }
      if (this.searchForm.hasNoProtect) {
        params.hasNoProtect = this.searchForm.hasNoProtect;
      }
      if (this.searchForm.hasOnlyBusiness) {
        params.hasOnlyBusiness = this.searchForm.hasOnlyBusiness;
      }
      if (this.searchForm.province) {
        params.province = this.searchForm.province;
      }
      if (this.searchForm.city) {
        params.city = this.searchForm.city;
      }
      if (this.searchForm.keyword) {
        params.keyword = this.searchForm.keyword;
      }
      if (this.searchForm.accurateSearchKeyword){
        params.accurateSearchKeyword = this.searchForm.accurateSearchKeyword
      }
      APIBusinessAccount.getBusinessAccountList(params).then((res) => {
        if (res.key === 1000) {
          res = res.result;
          this.total = res.count;
          res.list.forEach(item => {
            if (item.contactPersonTel) {
              item.contactPersonTelList = JSON.parse(item.contactPersonTel)
              if (item.contactPersonTelList.length > 0 && this.telTypeList && this.telTypeList.length > 0) {
                item.contactPersonTelList.forEach(contactPersonTelItem => {
                  contactPersonTelItem.typeName = this.getTelTypeName(contactPersonTelItem.type)
                })
              }
            }
          })
          this.dataList = res.list;
          if (this.searchForm.date && this.searchForm.date.length > 1) {
            this.dateShow = true
          } else {
            this.dateShow = false
          }
          this.tableLoading = false;
        }
      });
    },
    getCommerceList() {
      this.commerceTableLoading = true;
      const params = {
        token: this.$store.state.token,
        pageNum: this.commercePageNum,
        pageSize: this.commercePageSize,
        keyword: this.commerceSearchForm.keyword,
      }
      APIBusiness.getBusinessList(params).then((res) => {
        if (res.key === 1000) {
          this.commerceListData = res.result.list
          this.commerceTotal = res.result.count
          this.commerceTableLoading = false;
        }
      });
    },
    getCommerceSelectList() {
      this.commerceSelectTableLoading = true;
      const params = {
        token: this.$store.state.token,
        pageNum: this.commerceSelectPageNum,
        pageSize: this.commerceSelectPageSize,
        keyword: this.commerceSelectForm.keyword,
      }
      APIBusiness.getBusinessList(params).then((res) => {
        if (res.key === 1000) {
          this.commerceSelectListData = res.result.list
          this.commerceSelectTotal = res.result.count
          this.commerceSelectTableLoading = false;
        }
      });
    },
    nextConfirm() {
      if (this.commerceSelection.length < 1) {
        this.$message({
          message: '请选择商务',
          type: 'warning'
        });
        return
      }
      this.active++
    },
    previousConfirm() {
      this.active--
    },
    updateConfirm() {
      if (Object.keys(this.selectCommerce).length < 1) {
        this.$message({
          message: '请选择商务',
          type: 'warning'
        });
        return
      }
      const params = {
        token: this.$store.state.token,
        businessUserId: this.selectCommerce.id,
        updateIds: this.commerceSelection.map(item => item.id).join(","),
        updateType: 1,
      }
      ApiUser.doUpdateBusinessUser(params).then((res) => {
        if (res.key !== 1000) {
          this.$message({
            message: res.message,
            type: 'error'
          });
          return
        }
        this.$message({
          message: '操作成功',
          type: 'success'
        });
        this.selectCommerceDialogClose()
        this.getPost()
      });
    },
    handleCommerceSelectionChange(val) {
      this.commerceSelection = val;
    },
    selectCommerceCurrentChange(e) {
      this.selectCommerce = e;
    },
    handleCommerceSizeChange(e) {
      this.commercePageSize = e;
      this.getCommerceList();
    },
    handleCommerceCurrentChange(e) {
      this.commercePageNum = e;
      this.getCommerceList();
    },
    commerceSizeChange(e) {
      this.commerceSelectPageSize = e;
      this.getCommerceSelectList();
    },
    commerceCurrentChange(e) {
      this.commerceSelectPageNum = e;
      this.getCommerceSelectList();
    },
    handleCommandChange(e) {
      switch (e) {
        case 'commerce':
          this.getCommerceList()
          this.getCommerceSelectList()
          this.active = 0
          this.selectCommerceDialog = true
          break;
        case 'brand':
          this.getBrandList()
          this.getCommerceSelectList()
          this.brandActive = 0
          this.selectBrandDialog = true
          break;
        default:
          break;
      }
    },
    selectCommerceDialogClose() {
      this.selectCommerceDialog = false
      this.selectCommerce = ''
      this.commerceSelection = []
    },
    selectBrandDialogClose() {
      this.selectBrandDialog = false
      this.selectCommerce = ''
      this.commerceSelection = []
    },
    getBrandList() {
      this.brandTableLoading = true
      let params = {
        token: this.$store.state.token,
        pageNum: this.brandPageNum,
        pageSize: this.brandPageSize,
        keyword: this.brandSearchForm.keyword,
      }
      APIBusinessAccount.getBusinessAccountList(params).then((res) => {
        this.brandDataList = res.result.list
        this.brandTotal = res.result.count
        this.brandTableLoading = false
      })
    },
    handleBrandSizeChange(e) {
      this.brandPageSize = e
      this.getBrandList()
    },
    handleBrandCurrentChange(e) {
      this.brandPageNum = e
      this.getBrandList()
    },
    handleBrandSelectChange(e) {
      this.brandSelectData = e
    },
    brandNextConfirm() {
      if (this.brandSelectData.length < 1) {
        this.$message({
          message: '请选择商务',
          type: 'warning'
        });
        return
      }
      this.brandActive++
    },
    brandPreviousConfirm() {
      this.brandActive--
    },
    brandUpdateConfirm() {
      if (Object.keys(this.selectCommerce).length < 1) {
        this.$message({
          message: '请选择商务',
          type: 'warning'
        });
        return
      }
      const params = {
        token: this.$store.state.token,
        businessUserId: this.selectCommerce.id,
        updateIds: this.brandSelectData.map(item => item.id).join(","),
        updateType: 2,
      }
      ApiUser.doUpdateBusinessUser(params).then((res) => {
        if (res.key !== 1000) {
          this.$message({
            message: res.message,
            type: 'error'
          });
          return
        }
        this.$message({
          message: '操作成功',
          type: 'success'
        });
        this.selectBrandDialogClose()
        this.getPost()
      });
    },
  }
};
</script>

<style scoped>
.table-container .el-table__header th {
  cursor: move;
}

.table_over {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
<style lang="sass">
.el-table__body tr.current-row>td
  background-color: #0b57d0 !important
  color: #fff


.avatar-uploader
  .el-upload
    border: 1px dashed #d9d9d9
    border-radius: 6px
    cursor: pointer
    position: relative
    overflow: hidden

    &:hover
      border-color: #409eff

    .avatar-uploader-icon
      font-size: 28px
      color: #8c939d
      width: 100px
      height: 100px
      line-height: 100px !important
      text-align: center

    .avatar
      width: 100px
      height: 100px
      display: block
</style>
<style lang="sass" scoped>
.global-operation-list
  padding-left: 0

.global-select .global-select-btn
  background: #FFFFFF

.global-table-content
  padding: 0
  background-color: white
  width: 100%

.global-table-content-a
  margin: 0 auto
  width: 90%
  padding: 20px 0

.company-user-list
  //@include container
  .isStatus1
    width: 41px
    height: 21px
    background: #F1FFFC
    border-radius: 3px
    border: 1px solid #03C192
    font-size: 14px !important
    color: #03C192 !important
    line-height: 21px
    text-align: center

  .isStatus2
    width: 41px
    height: 21px
    background: #FFF2F2
    border-radius: 3px
    border: 1px solid #F46565
    font-size: 14px !important
    color: #F44141 !important
    line-height: 21px
    text-align: center

  .global-operation-left
    margin-right: 0

  ::v-deep .permission-dialog
    .el-dialog__body
      display: flex
      align-items: center
      flex-direction: column
      padding: 30px 60px

      .permission-dialog-tree
        width: 100%
        max-height: 450px
        overflow-y: auto
        overflow-x: hidden
        margin-bottom: 40px

  .global-table
    display: flex
    align-items: center
    justify-content: center
    flex-direction: column

    .list
      background: #FFFFFF
      box-shadow: 0px 0px 10px 0px rgba(93, 139, 198, 0.05)
      border-radius: 14px
      margin-bottom: 15px
      width: 100%
      display: flex
      align-items: center
      justify-content: space-between
      padding: 19px 24px

      .left
        display: flex
        align-items: center

        .img
          width: 90px
          height: 90px
          border-radius: 4px
          margin-right: 17px

        .nav
          .text1
            font-size: 20px
            font-weight: bold
            color: #222222
            line-height: 26px
            display: flex
            align-items: center
            justify-content: flex-start
            margin-bottom: 16px

            span
              height: 16px
              background: #FFF8ED
              border-radius: 11px
              border: 1px solid #FF9901
              font-size: 12px
              color: #FF9901
              line-height: 16px
              padding: 0 8px
              display: block
              text-align: center
              margin-left: 11px

          .text2
            display: flex
            align-items: center
            justify-content: flex-start
            margin-bottom: 25px

            i
              font-size: 20px
              color: #1861FD
              margin-right: 7px

            .text2_1
              font-size: 14px
              color: #222222
              line-height: 19px
              margin-right: 7px

            .text2_2
              margin-left: 5px
              font-size: 23px
              font-weight: bold
              color: #222222
              line-height: 29px
              margin-right: 3px

            .text2_3
              font-size: 14px
              color: #B5B5C3
              line-height: 19px

          .text3
            display: flex
            align-items: center

            i
              font-size: 14px
              color: #B5B5C3
              margin-right: 5px

            div
              font-size: 14px
              color: #B5B5C3
              line-height: 19px
              margin-right: 80px

      .right
//.permission-dialog-item
//  background: #f2f2f2

</style>
